<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./js/formatTime.js"></script>
		<style>
			.countdown {
				color: #f00;
				font-size: 20px;
			}
			.countdown .time {
				display: inline-block;
				padding: 5px;
				border-radius: 5px;
				background-color: red;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="countdown">
			<span class="time hour">03</span>
			<span class="split">:</span>
			<span class="time minutes">20</span>
			<span class="split">:</span>
			<span class="time seconds">40</span>
		</div>

		<script>
			var hourEl = document.querySelector('.hour')
			var minutesEl = document.querySelector('.minutes')
			var secondsEl = document.querySelector('.seconds')

			var endDate = new Date()
			endDate.setHours(24)
			endDate.setMinutes(0)
			endDate.setSeconds(0)
			endDate.setMilliseconds(0)
			function countTime() {
				var nowDate = new Date()
				var intervalTime = Math.floor((endDate.getTime() - nowDate.getTime()) / 1000)
				// 数字
				/* var num = 125
				var bai = Math.floor(num / 100)
				var shi = Math.floor((num / 10) % 10)
				var ge = Math.floor(num % 10) */

				var hour = Math.floor(intervalTime / 3600)
				var minute = Math.floor((intervalTime / 60) % 60)
				var second = intervalTime % 60

				hourEl.textContent = formatTime(hour)
				minutesEl.textContent = formatTime(minute)
				secondsEl.textContent = formatTime(second)
			}
			countTime()
			setInterval(countTime, 1000)
		</script>
	</body>
</html>
